<template>
    <div class="asideDiv">
        
        <div class="asideMenu">
            <el-icon class="asideIcon">
                <DArrowRight v-if="isCollapse" @click="isCollapse = !isCollapse" />
                <DArrowLeft v-else="isCollapse" @click="isCollapse = !isCollapse" />
            </el-icon>
            <el-menu default-active="2" class="menu-demo" :collapse="isCollapse" @open="handleOpen"
                @close="handleClose">
                <template v-for="item in menuData" :key="item.index">
                    <el-menu-item v-if="!item.children" :index="item.path" @click="showMain(item.path)">
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                        <span>{{ item.title }}</span>
                    </el-menu-item>
                    <el-sub-menu v-else :index="item.index">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>
                        <el-menu-item v-for="child in item.children" :key="child.index" :index="child.path"
                            @click="showMain(child.path)">
                            <el-icon>
                                <component :is="child.icon"></component>
                            </el-icon>
                            <span>{{ child.title }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                </template>
            </el-menu>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import api from '@/api/index'
import {
    House as ElIconHouse,
    User as ElIconUser,
    Document as ElIconDocument,
    Plus as ElIconPlus,
    Goods as ElIconGoods,
    Folder as ElIconFolder,
    Tickets as ElIconTickets,
    DataAnalysis as ElIconDataAnalysis,
    Setting as ElIconSetting,
    DArrowRight,
    DArrowLeft
} from '@element-plus/icons-vue' // 引入 Element Plus 图标组件
onMounted(() => {
    api.layout.getAsideMenu().then((res: any) => {
        console.log(res);
        menuData.value = res.menu.map((item: any) => {
    if (item.icon === 'el-icon-house') {
        item.icon = ElIconHouse;
    } else if (item.icon === 'el-icon-setting') {
        item.icon = ElIconSetting;
    } else if (item.icon === 'el-icon-user') {
        item.icon = ElIconUser;
    }
    return item;
});
    })
})
// 子传父
const emit = defineEmits(['showUrl','toggleCollapse'])
// 点击节点显示页面
const showMain = (path: string) => {
    console.log(path);
    emit('showUrl', path)
}
const menuData: any = ref([])
const isCollapse = ref(false);
const handleOpen = (key: any, keyPath: any) => {
    // console.log(key, keyPath);
};
const handleClose = (key: any, keyPath: any) => {
    // console.log(key, keyPath);
};
// 监听侧边栏是否折叠
watch(() => isCollapse.value, (newVal) => {
    console.log(newVal);
    emit('toggleCollapse', newVal)
})
</script>

<style scoped lang="scss">
.asideDiv {
    height: calc(100vh - 68px);

    .asideMenu {
        .asideIcon{
            background-color: #ae79f8;
            cursor: pointer;
            color: #fff;
            width: 39px;
            height: 39px;
            border-radius: 50%;
            margin: 5px 0 5px 13px;
            font-size: 20px;
        }

        .el-radio-group {
            width: 100%;
        }
        .menu-demo{
            background-color: #e4dfdf;
            .is-opened{
                .el-menu-item{
                background-color: #ddd3d3 ;
                    
                }
                .el-menu-item:focus{
                    background-color: #f3eeee ;
                    color: #6301ef;
                }
               
            }
            .is-active{
                    background-color: #f3eeee !important;
                    color: #6301ef !important;
                    .el-sub-menu__title{
                        color: #6301ef !important;

                    }
                }
        }
    }
}

</style>